<!--
 * @Descripttion: 大屏设计器 -- 预览
 * @Author: lide1202@hotmail.com
 * @Date: 2021-3-13 11:04:24
 * @Last Modified by:   lide1202@hotmail.com
 * @Last Modified time: 2021-3-13 11:04:24
 !-->
<template>
  <div class="layout" v-if="show">
    <div :style="bigScreenStyle">
      <widget
        v-for="(widget, index) in widgets"
        :key="index"
        v-model="widget.value"
        :type="widget.type"
      />
    </div>
    <el-dialog  :visible="AEODialogShow.show" width="50%" @close="closeAEODialog" :close-on-click-modal="false" >
      <span slot="title" class="dialog_title">
          
            <img class="imgTwo" src="@/assets/images/bigViewIMG/companyIcon.png" alt="">
            <span>标签查询 - {{labelTitle}}</span>
      </span>
      <div class="searchForm">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-row :gutter="24">
             <el-col :span="7">
               <el-form-item label="">
                  <el-select v-model="formInline.label" placeholder="请选择标签" @change="changeSelect">
                    <el-option
                      v-for="(item,index) in list"
                      :key="index"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
               <el-form-item label="">
                <el-input v-model="formInline.searchValue" size="small"  placeholder="请输入企业名称或企业编码"></el-input>
              </el-form-item>
            </el-col>
           
            <el-col :span="10">
                <el-form-item label="">
                  <el-button type="primary"  icon="el-icon-search" @click="getLabelList">查询</el-button>
                  <el-button  icon="el-icon-refresh-right" @click="resetFormInline">重置</el-button>
                </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="tableList">
            <el-table v-loading="loading" :data="tableData" style="width: 100%" :cell-style="cellStyle" 
                :header-cell-style="{ color: '#00ffff' }" @sort-change="changeTableSort" @row-click="openDetails" >
                  <template slot="empty">
                  
                    <span style="color:#9d9d9d;">{{tableEmptyText}}</span>
                </template>

                 <el-table-column type="index" label="序号" width="50"></el-table-column>
                 <el-table-column prop="fullName" label="企业名称" :show-overflow-tooltip="true" ></el-table-column>
                 <el-table-column prop="tradeCo" label="企业编码" ></el-table-column>
                 <el-table-column prop="imports" label="进口额(元)" sortable width="150"></el-table-column>
                 <el-table-column prop="exports" label="出口额(元)" sortable width="150"></el-table-column>
            </el-table>
      </div>
      <div class="bottom">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="formInline.page"
            :page-size="formInline.size"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
      </div>


    
    </el-dialog>
     <el-dialog  :visible="showIndustry.show" width="50%" @close="closeShowIndustry" :close-on-click-modal="false" >
      <span slot="title" class="dialog_title">
          
            <img class="imgTwo" src="@/assets/images/bigViewIMG/companyIcon.png" alt="">
            <span>行业分类查询 - {{hyTitle}}</span>
      </span>
      <div class="searchForm">
        <el-form :inline="true" :model="hyForm" class="demo-form-inline">
          <el-row :gutter="24">
             <el-col :span="7">
               <el-form-item label="">
                  <el-select v-model="hyForm.label" placeholder="请选择行业类型" @change="changeSelecthy">
                    <el-option
                      v-for="(item,index) in yhOptions"
                      :key="index"
                      :label="item.classificationName"
                      :value="item.classificationName">
                    </el-option>
                  </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
               <el-form-item label="">
                <el-input v-model="hyForm.searchValue" size="small"  placeholder="请输入企业名称或企业编码"></el-input>
              </el-form-item>
            </el-col>
           
            <el-col :span="10">
                <el-form-item label="">
                  <el-button type="primary"  icon="el-icon-search" @click="getHyList">查询</el-button>
                  <el-button  icon="el-icon-refresh-right" @click="resetHyForm">重置</el-button>
                </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="tableList">
            <el-table v-loading="hyLoading" :data="hyData" style="width: 100%"  :cell-style="cellStyle1"
                :header-cell-style="{ color: '#00ffff' }" @sort-change="yhchangeTableSort" @row-click="yhopenDetails" >
                  <template slot="empty">
                  
                    <span style="color:#9d9d9d;">{{hytableEmptyText}}</span>
                </template>

                 <el-table-column type="index" label="序号" width="50"></el-table-column>
                 <el-table-column prop="fullName" label="企业名称" :show-overflow-tooltip="true" ></el-table-column>
                 <el-table-column prop="tradeCo" label="企业编码" ></el-table-column>
                 <el-table-column prop="imports" label="进口额(元)" sortable width="150"></el-table-column>
                 <el-table-column prop="exports" label="出口额(元)" sortable width="150"></el-table-column>
            </el-table>
      </div>
      <div class="bottom">
          <el-pagination
            @size-change="hyhandleSizeChange"
            @current-change="hyhandleCurrentChange"
            :current-page="hyForm.page"
            :page-size="hyForm.size"
            layout="total, prev, pager, next"
            :total="yhtotal">
          </el-pagination>
      </div>


    
    </el-dialog>
    <!--  -->
     <el-dialog  :visible="showYJJ.show" width="50%" @close="closeShowYJJ" :close-on-click-modal="false" >
      <span slot="title" class="dialog_title">
          
            <img class="imgTwo" src="@/assets/images/bigViewIMG/companyIcon.png" alt="">
            <span>{{YJJTitle}}</span>
      </span>
      <div class="tableList">
            <el-table v-loading="YJJLoading" :data="YJJData" style="width: 100%"  :cell-style="{ color: '#fff' }"
                :header-cell-style="{ color: '#00ffff' }" @sort-change="YJJchangeTableSort" @row-click="YJJopenDetails" >
                  <template slot="empty">
                  
                    <span style="color:#9d9d9d;">{{YJJtableEmptyText}}</span>
                </template>

                 <el-table-column type="index" label="序号" width="50"></el-table-column>
                 <el-table-column prop="fullName" label="企业名称" :show-overflow-tooltip="true" ></el-table-column>
                 <el-table-column prop="tradeCo" label="企业编码" ></el-table-column>
                 <el-table-column prop="imports" label="进口额(元)" sortable width="150"></el-table-column>
                 <el-table-column prop="exports" label="出口额(元)" sortable width="150"></el-table-column>
            </el-table>
      </div>
      <div class="bottom">
          <el-pagination
            @size-change="YJJhandleSizeChange"
            @current-change="YJJhandleCurrentChange"
            :current-page="YJJForm.page"
            :page-size="YJJForm.size"
            layout="total, prev, pager, next"
            :total="YJJTotal">
          </el-pagination>
      </div>


    
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import widget from "../designer/widget/temp";
import { detailDashboard } from "@/api/bigscreen";
import { reqYJJList,reqBZPList,reqBQList,reqEnterpriseLabelConcordance,reqEnterprise_classification,reqHyList } from '@/api/home'
import { setScreenItem } from '@/utils/screenStorage.js'
import { encrypt } from '@/utils/AES.js'

export default {
  name: "Login",
  components: {
    widget
  },
  data() {
    return {
      loading:false,
      bigScreenStyle: {},
      widgets: [],
      serverData:{},
      show:true,
      formInline:{
        searchValue:'',
        label:'',
        size:10,
        page:1,

      },
      orderField:'',
      orderType:'',
      tableData:[],
      list: [],
      labelTitle:'',
      total:0,
      tableEmptyText:'',
      hyTitle:'',//行业
      hyForm:{
         searchValue:'',
        label:'',
        size:10,
        page:1,
      },
      yhOptions:[],
      yhtotal:0,
      hytableEmptyText:'',
      hyData:[],
      hyLoading:false,
      hyorderField:'',
      hyorderType:'',
      // 
      YJJTitle:'',
      YJJtableEmptyText:'',
      YJJData:[],
      YJJLoading:false,
      YJJForm:{
          size:10,
          page:1
      },
       YJJorderField:'',
      YJJorderType:'',
      YJJTotal:0
    };
  },
  watch:{
    
    $route: {
      immediate: true,
        handler(){
          if (this.$route.query.reportCode) {//需要监听的参数
            // if (this.$route.query.reportCode =='EArchives_first') {
            //   location.reload()
            // }
            this.getData()
        }
      }
    },
     customCode(val) {
            // console.log(val);
     
              this.getHyOptions(val)

    },
    
    AEODialogShow:{
      deep:true,
      handler(val){
       
        this.formInline={
          searchValue:'',
          label:'',
          size:10,
          page:1
        }
        this.labelTitle=val.value
        if(val.value){
            if(val.value!='AEO') {
            this.formInline.label=this.enterpriseLabel
            if(val.show){
               this.getLabelList()
            }
           
          }else {
            if(val.show){
               this.getLabelList()
            }
           
          }
        }

        
       
      }
    },
    showIndustry:{
       deep:true,
        handler(val){
          this.hyForm={
            searchValue:'',
            label:'',
            size:10,
            page:1
          }
          this.hyForm.label=val.value
           this.hyTitle=val.value
          if(val.show){
             this.getHyList()
          }
         
         
        }
    },
    showYJJ:{
      deep:true,
      handler(val){
        this.YJJForm={
           
           size:10,
            page:1
        },
         this.YJJTitle=val.value
          if(val.show){
             this.getYJJList()
          }
      }
    }
  },
  computed:{
    ...mapGetters(['AEODialogShow','customCode','enterpriseLabel','showIndustry','showYJJ']),
  },
  mounted() {
    this.getData();
    window.addEventListener("resize", this.resizeHandler);

    
  },
  created() {
        if (this.customCode == '' || !this.customCode) {
           
            this.getHyOptions('22')
        } else {
           
            this.getHyOptions(this.customCode)
        }
         this.getList()
       
    },
  methods: {
    cellStyle(data){
      if(data){
        return 'cursor:pointer;color:#fff'
      }
    },
    cellStyle1(data){
      if(data){
        return 'cursor:pointer;color:#fff'
      }
    },
   
    // 应急局、一类爆炸品
    YJJhandleSizeChange(val){
      this.YJJForm.size=val
      this.getYJJList()
    },
    YJJhandleCurrentChange(val){
      this.YJJForm.page=val
      this.getYJJList()
    },

   async getYJJList(){
          this.YJJtableEmptyText=''
      this.YJJLoading=true
      let NewcustomCode
      let obj
      let Field
      let Type
  // 判断 排序
      if(this.YJJorderField!==''&&this.YJJorderType!=='') {
        Field=this.YJJorderField,
        Type=this.YJJorderType
      }else {
        Field='',
        Type=''
      }
      // 判断关区代码
      if (this.customCode == '' || !this.customCode) {
          NewcustomCode='22'
      } else {
          NewcustomCode=this.customCode
      }
       obj={

              customsCode:NewcustomCode,
              page:this.hyForm.page,
              size:this.hyForm.size,
              orderField:Field ,
              orderType: Type
            }

      if(this.showYJJ.value=='应急局涉危企业'){
          const res=await reqYJJList(obj)
          if(res.data){
            this.YJJData=res.data.data
            this.YJJTotal=res.data.totalCount
          }else {
               this.YJJData=[]
            this.YJJTotal=0
          }
      }else {
          const res=await reqBZPList(obj)
          if(res.data){
            this.YJJData=res.data.list
            this.YJJTotal=res.data.total
          }else {
               this.YJJData=[]
            this.YJJTotal=0
          }
      }
    
          
       this.YJJLoading=false
       this.YJJtableEmptyText='查无数据'
    },
    closeShowYJJ(){
       this.YJJData=[]
      this.YJJForm={
        size:10,
        page:1,
      },
         this.$store.commit('homeStatus/changeShowYJJ', {
                show: false,
                value: null,
             })
    },
    YJJopenDetails(row){
       this.$store.commit('homeStatus/changeShowYJJ', {
        show:false,
        value:null
      })
       this.$router.push({
        path: "/visual/bigscreen/viewer?reportCode=SecondView",
        query: { 
          key: encrypt(JSON.stringify({
            company: row.fullName,
             tradeCo: row.tradeCo
          }))
         }
      });
      setScreenItem({ company: row.fullName})
      
    },
    YJJchangeTableSort({column,order}){
        if(column.property=='imports'){
          this.YJJorderField='I'
          if(order=='ascending'){
            this.YJJorderType='asc'
          }else if(order=='descending') {
            this.YJJorderType='desc'
          }else {
            this.YJJorderType=''
          }
        }else if(column.property=='exports'){
          this.YJJorderField='E'
          if(order=='ascending'){
            this.YJJorderType='asc'
          }else if(order=='descending') {
            this.YJJorderType='desc'
          }else {
            this.YJJorderType=''
          }
        }
        this.getYJJList()
    },
     // 行业
    changeSelecthy(val){
     this.hyTitle=val
    },
     hyhandleSizeChange(val){
      this.hyForm.size=val
      this.getHyList()
    },
    hyhandleCurrentChange(val){
      this.hyForm.page=val
      this.getHyList()
    },
    yhopenDetails(row){
       this.$store.commit('homeStatus/changeShowIndustry', {
        show:false,
        value:null
      })
       this.$router.push({
        path: "/visual/bigscreen/viewer?reportCode=SecondView",
        query: { 
          key: encrypt(JSON.stringify({
            company: row.fullName,
             tradeCo: row.tradeCo
          }))
         }
      });
      setScreenItem({ company: row.fullName})
      
    },
    yhchangeTableSort({column,order}){
         if(column.property=='imports'){
          this.hyorderField='I'
          if(order=='ascending'){
            this.hyorderType='asc'
          }else if(order=='descending') {
            this.hyorderType='desc'
          }else {
            this.hyorderType=''
          }
        }else if(column.property=='exports'){
          this.hyorderField='E'
          if(order=='ascending'){
            this.hyorderType='asc'
          }else if(order=='descending') {
            this.hyorderType='desc'
          }else {
            this.hyorderType=''
          }
        }
        this.getHyList()
    },
    async getHyList(){
       this.hytableEmptyText=''
      this.hyLoading=true
      let NewcustomCode
      let obj
      let Field
      let Type
  // 判断 排序
      if(this.hyorderField!==''&&this.hyorderType!=='') {
        Field=this.hyorderField,
        Type=this.hyorderType
      }else {
        Field='',
        Type=''
      }
      // 判断关区代码
      if (this.customCode == '' || !this.customCode) {
          NewcustomCode='22'
      } else {
          NewcustomCode=this.customCode
      }
       obj={
              classificationName:this.hyForm.label,
             
              tradeCoOrFullName:this.hyForm.searchValue,
              customsCode:NewcustomCode,
              page:this.hyForm.page,
              size:this.hyForm.size,
              orderField:Field ,
              orderType: Type
            }
      const res=await reqHyList(obj)
         if(res.data){
            this.hyData=res.data.list
            this.yhtotal=res.data.total
          }
          
       this.hyLoading=false
       this.hytableEmptyText='查无数据'
    },
    async getHyOptions(code){
        const res=await reqEnterprise_classification({customsCode:code})
        this.yhOptions=res.data
    },
    resetHyForm(){
      this.hyForm={
        searchValue:'',
        label:this.showIndustry.value,
        size:10,
        page:1
      },
      
      this.hyTitle=this.showIndustry.value
      this.getHyList()
    },
    closeShowIndustry(){
      this.hyData=[]
      this.hyForm={
         searchValue:'',
        label:'',
        size:10,
        page:1,
      },
         this.$store.commit('homeStatus/changeShowIndustry', {
                show: false,
                value: null,
             })
    },
    // 标签
    openDetails(row){
      this.$store.commit('homeStatus/changeAEODialogShow', {
        show:false,
        value:null
      })
       this.$router.push({
        path: "/visual/bigscreen/viewer?reportCode=SecondView",
        query: { 
          key: encrypt(JSON.stringify({
            company: row.fullName,
             tradeCo: row.tradeCo
          }))
         }
      });
      setScreenItem({ company: row.fullName})
      this.$store.commit('homeStatus/changeEnterpriseLabel',null)
    },
    changeTableSort({column,order}){
        console.log(column,order);
        if(column.property=='imports'){
          this.orderField='I'
          if(order=='ascending'){
            this.orderType='asc'
          }else if(order=='descending') {
            this.orderType='desc'
          }else {
            this.orderType=''
          }
        }else if(column.property=='exports'){
          this.orderField='E'
          if(order=='ascending'){
            this.orderType='asc'
          }else if(order=='descending') {
            this.orderType='desc'
          }else {
            this.orderType=''
          }
        }
        this.getLabelList()
    },
    handleSizeChange(val){
      this.formInline.size=val
      this.getLabelList()
    },
    handleCurrentChange(val){
      this.formInline.page=val
      this.getLabelList()
    },
    async getLabelList(){
      this.loading=true
    
      let NewcustomCode
      let obj
      let Field
      let Type
  // 判断 排序
      if(this.orderField!==''&&this.orderType!=='') {
        Field=this.orderField,
        Type=this.orderType
      }else {
        Field='',
        Type=''
      }



      // 判断关区代码
      if (this.customCode == '' || !this.customCode) {
          NewcustomCode='22'
      } else {
          NewcustomCode=this.customCode
      }

      if(this.AEODialogShow.value=='AEO') {
        if(this.formInline.label) {
            obj={
              enterpriseLabel:this.formInline.label,
              coClass:'',
              tradeCoOrFullName:this.formInline.searchValue,
              customsCode:NewcustomCode,
              page:this.formInline.page,
              size:this.formInline.size,
              orderField:Field ,
              orderType: Type
            }
        }else {
           obj={
              enterpriseLabel:'',
              coClass:'高级认证企业',
              tradeCoOrFullName:this.formInline.searchValue,
              customsCode:NewcustomCode,
              page:this.formInline.page,
              size:this.formInline.size,
             orderField:Field ,
              orderType: Type
            }
        }
       
      }
      else {
        if(this.formInline.label=='海关失信企业'){
          obj={
          enterpriseLabel:'',
          coClass:'C',
          tradeCoOrFullName:this.formInline.searchValue,
          customsCode:NewcustomCode,
          page:this.formInline.page,
          size:this.formInline.size,
          orderField:Field ,
          orderType: Type,
        
          }
        }else if(this.formInline.label=='运输企业'){
          obj={
            enterpriseLabel:'舱单及相关电子数据传输人|进出境运输工具服务企业|进出境运输工具服务负责人',
            coClass:'',
            tradeCoOrFullName:this.formInline.searchValue,
            customsCode:NewcustomCode,
            page:this.formInline.page,
            size:this.formInline.size,
            orderField:Field ,
            orderType: Type
          }
        } 
        else {
          obj={
            enterpriseLabel:this.formInline.label,
            coClass:'',
            tradeCoOrFullName:this.formInline.searchValue,
            customsCode:NewcustomCode,
            page:this.formInline.page,
            size:this.formInline.size,
            orderField:Field ,
            orderType: Type
           }
        }
        
      }
      // console.log(obj);
      const res=await reqEnterpriseLabelConcordance(obj)
      
      if(res.data){
        this.tableData=res.data.list
        this.total=res.data.total
      }
      this.tableEmptyText='查无数据'
      this.loading=false
    },
    changeSelect(val) {
       this.labelTitle=val
    },
    resetFormInline(){
      this.formInline={
        searchValue:'',
        label:this.enterpriseLabel?this.enterpriseLabel:'',
        size:10,
        page:1
      },
      
      this.labelTitle=this.AEODialogShow.value
      this.orderField='',
      this.orderType='',
      this.getLabelList()
    },
    async getList() {
            const res = await reqBQList()
            //    const res1= await reqAdministrativeSanction({customsCode:val,page:1,size:10})
            // console.log('2222', res);
            this.list = res.data
          //  console.log(res.data);
          
    },
    closeAEODialog(){
      // this.resetFormInline()
      this.tableData=[]
      this.formInline={
        searchValue:'',
        label:'',
        size:10,
        page:1
      },
      this.$store.commit('homeStatus/changeAEODialogShow', {
        show:false,
        value:null
      })
      this.$store.commit('homeStatus/changeEnterpriseLabel',null)
    },
    resizeHandler(){
      const equipment = document.body.clientWidth;
      
      const ratioEquipment = equipment / this.serverData.dashboard.width;
      const equipmentH = document.body.clientHeight;
     
      const ratioEquipmentH = equipmentH / this.serverData.dashboard.height;
      this.bigScreenStyle = {
        width: this.serverData.dashboard.width + "px",
        height: this.serverData.dashboard.height + "px",
        "background-color": this.serverData.dashboard.backgroundColor,
        "background-image": "url(" + this.serverData.dashboard.backgroundImage + ")",
        "background-position": "0% 0%",
        "background-size": "100% 100%",
        "background-repeat": "initial",
        "background-attachment": "initial",
        "background-origin": "initial",
        "background-clip": "initial",
        transform: `scale(${ratioEquipment}, ${ratioEquipmentH})`,
        "transform-origin": "0 0"
      };
    },
    async getData() {
      
      const reportCode = this.$route.query.reportCode;
      const { code, data } = await detailDashboard(reportCode);
      // console.log('>>>>>>>',data)
      if (code != 200) return;
      const equipment = document.body.clientWidth;
      // console.log('宽度《《《《',equipment)
      const ratioEquipment = equipment / data.dashboard.width;
      const equipmentH = document.body.clientHeight;
      // console.log('高度《《《《',equipmentH)
      const ratioEquipmentH = equipmentH / data.dashboard.height;
      this.bigScreenStyle = {
        width: data.dashboard.width + "px",
        height: data.dashboard.height + "px",
        "background-color": data.dashboard.backgroundColor,
        "background-image": "url(" + data.dashboard.backgroundImage + ")",
        "background-position": "0% 0%",
        "background-size": "100% 100%",
        "background-repeat": "initial",
        "background-attachment": "initial",
        "background-origin": "initial",
        "background-clip": "initial",
        transform: `scale(${ratioEquipment}, ${ratioEquipmentH})`,
        "transform-origin": "0 0"
      };
      this.widgets = data.dashboard.widgets;
      this.serverData=data
    }
  },
  beforeDestroy(){
    this.show=false
  }

};
</script>

<style scoped lang="scss">
::-webkit-scrollbar {
  
      width: 3px !important;
  
      height: 3px !important;
  
    }
  
    ::-webkit-scrollbar-thumb {
  
      border-radius: 10px;
  
      width: 1px;
  
      background: rgba(255, 255, 255, 0.5);
  
    }
  
    ::-webkit-scrollbar-track {
  
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  
      border-radius: 10px;
  
      background: rgba(57, 177, 255, 0.16);
  
    }
.layout {
  width: 100%;
  height: 100%;
  text-align: center;
}
.bottom-text {
  width: 100%;
  color: #a0a0a0;
  position: fixed;
  bottom: 16px;
  z-index: 9999;
}
// #mapContainerTD {
//   background-color: transparent;
// }

::v-deep .el-dialog {
  margin-top:20vh !important;
 
  .el-dialog__header {
     background-color: rgba(0, 50, 163, 0.9);
     padding: 10px 10px 10px 20px;
      text-align: start;
      .dialog_title {
        color: #00ffff;
        display: flex;
        .imgTwo {
          margin-right: 10px;
          width: 20px;
          height: 20px;
        }
        span {
          font-size: 16px;
        }
      } 
     .el-dialog__headerbtn {
          position: absolute;
          top: 15px;
          right: 20px;
          padding: 0;
          background: transparent;
          border: none;
          outline: none;
          cursor: pointer;
          font-size: 16px;
      .el-dialog__close {
        color: #00ffff;
      }
     }
  }
  .el-dialog__body {
    min-height: 400px;
      background-color: rgba(0, 50, 163, 0.9);
      text-align: start;
      .searchForm {
        padding-left:20px ;
        .demo-form-inline {
          .el-form-item {
            .el-input__inner {
              width: 200px;
              font-size: 12px;
            }
          }
        }
      }
       .tableList {
     
        .el-table {
            margin: 0 auto;
            .el-loading-mask {
                    background-color: rgba(255, 255, 255, 0);
            
            
                    .el-loading-spinner .circular {
                        width: 30px;
                        height: 30px;
                    }
            
                    .el-loading-spinner .path {
                        stroke: #c23531;
                        stroke-width: 8px;
                    }
                }
        }
        .el-table,
        .el-table__expanded-cell {
            background-color: transparent !important;

        }

        /* 表格内背景颜色 */

        .el-table tr,
        .el-table td {
            background-color: transparent !important;
            border-bottom: none;
        }

        .el-table th {
            background-color: #013689 !important;
            border-bottom: none;

        }

        .el-table td {
            border-bottom: none;
        }

        .el-table::before {
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0px;
        }
    }
    .bottom {
      text-align: end;
        .el-pagination {
          .el-pagination__total {
            color: #fff;
          }
          .btn-prev {
            background-color: transparent;
          }
          .btn-next {
            background-color: transparent;
          }
          .el-pager {
            li {
              background: transparent;
              color: #fff;
            }
            li.active {
              color: #1890ff;
            }
          }


        }
    }
  }
}
</style>
